<template>
  <view class="hotposts-ranking-container">
    <!-- 自定义导航栏 -->
    <navigation-bar>
      <navigator
        style="position: absolute;top: 50%;transform: translateY(-50%);left: 20px;font-size: 16px;line-height: 16px;color: #000;"
        class="iconfont" hover-class="none" open-type="navigateBack">&#xe61a;
      </navigator>
      <view class="top-title-bar">
        热帖榜
      </view>
    </navigation-bar>
    <!-- 内容主体 -->
    <view class="main-hotposts-ranking"
      :style="{height: `calc(100% - ${statusbarHeight}px - ${bar_topHeight}px - 20rpx)`}">
      <!-- 热榜 -->
      <view class="hotposts_list-bd">
        <z-paging ref="paging" v-model="demoList" :use-cache="false" :auto-show-back-to-top="true" @query="onQuery">
          <!-- 热榜项 -->
          <view class="hotposts_item-card" v-for="(postItem,index) in demoList" :key="postItem.id">
            <view class="top-info-header">
              <!-- 左侧信息 -->
              <view class="user-inner-left">
                <view class="ranking-tag"
                  :style="{'background-color': index > 3 ? mapRankColor[3] : mapRankColor[index]}">
                  {{postItem.rank}}
                </view>
                <navigator url="/subpkg/user-page/user-page?userType=user" hover-class="none" class="user-avatar">
                  <image :src="postItem.avatar" style="width: 80rpx;height: 80rpx;" mode="aspectFill"></image>
                </navigator>
                <view class="user_post-info">
                  <view class="user-name">
                    {{postItem.user}}
                  </view>
                  <view class="post-info">
                    {{postItem.time}}<i class="gap">·</i>{{postItem.views}}
                  </view>
                </view>
              </view>
            </view>
            <navigator url="/thirdpkg/post-detail/post-detail?postType=求购" class="bottom-content-footer">
              <view class="content-txt">
                <text>{{postItem.text}}</text>
                <view class="img-num iconfont" v-if="postItem.imgList.length !== 0">
                  {{postItem.imgList.length}}张图片
                </view>
              </view>
            </navigator>
          </view>
        </z-paging>
      </view>
    </view>
  </view>
</template>

<script>
  import naviHeightMix from "@/mixins/get-NavigationBar_Height.js"
  export default {
    mixins: [naviHeightMix],
    data() {
      return {
        mapRankColor: [
          '#FFD800', '#C0C0C0', '#C6A84B', '#DBDBDB'
        ],
        demoList: [],
        hotPostList: [{
            id: 1,
            rank: 1,
            user: '暗影岛   佛耶戈',
            avatar: '/static/user.png',
            time: '10分钟前',
            views: '9.5w人看过',
            text: '一晚上睡不着，还是早点起床去教室自习一会儿吧，最近总是失眠，好奇怪啊。以前从来不这样的。',
            imgList: []
          },
          {
            id: 2,
            rank: 2,
            user: '德玛西亚   盖伦',
            avatar: '/static/my-avatar.png',
            time: '11分钟前',
            views: '3.4w人看过',
            text: '送给大家一张图片，可以做电脑壁纸哦，哈哈哈哈哈哈哈哈哈哈哈。',
            imgList: ['/static/post-cover1.png']
          },
          {
            id: 3,
            rank: 3,
            user: '暗裔   亚托克斯',
            avatar: '/static/my-avatar.png',
            time: '11分钟前',
            views: '3.4w人看过',
            text: `敬爱的同学，欢迎您的到来！



您也许会好奇，Campus circle团队到底是由哪些人进行开发、进行维护、进行运营的，下面由我带您认识我们的团队！`,
            imgList: []
          },
          {
            id: 4,
            rank: 4,
            user: '暗影岛   茂凯',
            avatar: '/static/official.png',
            time: '10分钟前',
            views: '9.5w人看过',
            text: '一晚上睡不着，还是早点起床去教室自习一会儿吧，最近总是失眠，好奇怪啊。以前从来不这样的。可能是最近经常熬夜导致的吧，也可能是最近要考试了，心理出现了问题吧，其实我本来打算出去看看医生的，但是明天就要考有机和物化了，我还没有复习，再加上平时我也没好好学习，我现在感觉好难受啊，还是去教室复习吧，有同学知道物理化学怎么样复习比较有效果吗，我真的什么都不会，呜呜呜，求大神帮忙，呜呜呜，完事了请你吃饭。',
            imgList: []
          },
          {
            id: 5,
            rank: 5,
            user: '暗影岛   赛娜',
            avatar: '/static/avatar.png',
            time: '11分钟前',
            views: '3.4w人看过',
            text: '送给大家一张图片，可以做电脑壁纸哦，哈哈哈哈哈哈哈哈哈哈哈。',
            imgList: ['/static/post-cover1.png']
          },
          {
            id: 6,
            rank: 6,
            user: '暗影岛   赛娜',
            avatar: '/static/avatar.png',
            time: '11分钟前',
            views: '3.4w人看过',
            text: '送给大家一张图片，可以做电脑壁纸哦，哈哈哈哈哈哈哈哈哈哈哈。',
            imgList: []
          }
        ], // demo data
      };
    },
    onLoad() {
      // 演示数据
      this.demoList = this.hotPostList
      this.$refs.paging.reload()
    },
    methods: {
      // 请求
      onQuery: function() {
        this.$refs.paging.complete(this.demoList)
      }
    }
  }
</script>

<style lang="scss">
  .hotposts-ranking-container {
    height: 100%;

    .top-title-bar {}

    .main-hotposts-ranking {
      height: 100%;
      margin-top: 20rpx;
      padding: 0 40rpx;

      .hotposts_list-bd {
        height: 100%;

        .hotposts_item-card {
          margin-top: 40rpx;

          .top-info-header {
            display: flex;
            justify-content: space-between;
            height: 80rpx;

            .user-inner-left {
              display: flex;
              align-items: center;

              .ranking-tag {
                width: 28rpx;
                height: 56rpx;
                color: #000;
                text-align: center;
                line-height: 56rpx;
                font-size: 36rpx;
              }

              .user-avatar {
                margin-left: 16rpx;
              }

              .user_post-info {
                display: flex;
                flex-direction: column;
                justify-content: space-evenly;
                margin-left: 32rpx;
                height: 100%;
                font-weight: 600;

                .post-info {
                  color: #0191FF;
                  font-size: 20rpx;
                  font-weight: 400;

                  .gap {
                    display: inline;
                    margin: 0 10rpx;
                  }
                }
              }
            }
          }

          .bottom-content-footer {
            margin-top: 20rpx;

            .img-num {
              display: inline-block;
              color: #0191FF;
              font-size: 20rpx;

              &::before {
                content: "\ec35";
                position: relative;
                bottom: 0;
                font-size: 36rpx;
                line-height: 36rpx;
                margin: 0 8rpx;
              }
            }
          }
        }
      }
    }
  }
</style>